<template>
  <div class="network-box sf-ipInput" :class="[disabled?'sf-ipInput-disabled':'']">
    <div class="sf-ipInput-item">
      <el-input  ref="part1" :disabled="disabled" v-model="firstPart"  @input="handleInput('first')"></el-input>
      <span>.</span>
    </div>
    <div class="sf-ipInput-item">
      <el-input  ref="part2" :disabled="disabled" v-bind="$attrs" v-model="secondPart"  @input="handleInput('second')"></el-input>
      <span>.</span>
    </div>
    <div class="sf-ipInput-item">
      <el-input  ref="part3" :disabled="disabled" v-bind="$attrs" v-model="thirdPart"  @input="handleInput('three')" ></el-input>
      <span>.</span>
    </div>
    <div class="sf-ipInput-item">
      <el-input  ref="part4" :disabled="disabled" v-bind="$attrs" v-model="fourthPart"  @input="handleInput('four')"></el-input>
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: "value",
    event: "input"
  },
  props: {
    value: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.firstPart = val.split(".")[0];
          this.secondPart = val.split(".")[1];
          this.thirdPart = val.split(".")[2];
          this.fourthPart = val.split(".")[3];
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      firstPart: "",
      secondPart: "",
      thirdPart: "",
      fourthPart: ""
    };
  },
  methods: {
    handleInput(part) {
      // 每个部分的值限制在0-255之间
      this.firstPart = this.limitRange(this.firstPart, 0, 255);
      this.secondPart = this.limitRange(this.secondPart, 0, 255);
      this.thirdPart = this.limitRange(this.thirdPart, 0, 255);
      this.fourthPart = this.limitRange(this.fourthPart, 0, 255);
      this.$emit(
        "input",
        this.firstPart +
          "." +
          this.secondPart +
          "." +
          this.thirdPart +
          "." +
          this.fourthPart
      );
      // 检查是否输入了"."
      if (event && event.inputType === "insertText" && event.data === ".") {
        this.focusNext(part);
      }
      if(this[`${part}Part`].length === 3) {
        this.focusNext(part);
      }
    },
    handleFocus(part) {
      // 检查是否输入了"."
      if (event && event.inputType === "insertText" && event.data === ".") {
        this.focusNext(part);
      }
    },
    focusNext(part) {
      // 聚焦下一个输入框
      if (part === 'first') {
        this.$refs.part2.focus();
      } else if (part === 'second') {
        this.$refs.part3.focus();
      } else if (part === 'three') {
        this.$refs.part4.focus();
      }
    },
    limitRange(value, min, max) {
      // 将值限制在指定范围内
      const parsedValue = parseInt(value);
      if (isNaN(parsedValue)) {
        return "";
      }
      return Math.min(Math.max(parsedValue, min), max).toString();
    }
  }
};
</script>

<style lang="less" scoped>
.sf-ipInput {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: flex;
  font-size: inherit;
  height: 35px;
  line-height: 35px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  &-disabled {
    cursor: not-allowed;
    background:#f5f7fa;
  }
  .sf-ipInput-item {
    width: 25%;
    display: inline-block;
    .el-input {
      width: calc(100% - 14px);
      border: none;
      display: inline-block;
      margin-top: -4px;
      vertical-align: middle;
    }
    /deep/ .el-input__inner {
      border: none;
      outline: none;
      height: 30px;
      line-height: 30px;
      padding: 0px;
    }
  }
}
</style>